<template>
<!-- 直播观众分析- 6 36 -->
  <div id="audience">
    <div class="mainDiv" v-if="vipRootObj[6][36].owner">
      <div class="itemDiv">
        <div class="titleBox">
          <img src="@/assets/wang/tdetails/Gender.png" alt="" />
          <span>观众性别分布</span>
        </div>
        <div class="fansChartBox">
          <BigPie
            :valueData="genderData"
            v-if="finishFlag && genderData.length != 0"
          />
          <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishFlag && genderData.length == 0"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <div class="itemDiv">
        <div class="titleBox">
          <img src="@/assets/wang/tdetails/age.png" alt="" />
          <span>观众年龄分布</span>
        </div>
        <div class="fansChartBox">
          <BigPie
            :valueData="ageData"
            v-if="finishFlag && ageData.length != 0"
          />
          <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div v-if="finishFlag && ageData.length == 0" class="noDataNoticewl">
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <!-- <div class="itemDiv mapDiv">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="@/assets/wang/tdetails/map.png" alt="" />
            <span>观众地域分布</span>
          </div>
          <radio_group01
            v-model="fansMap"
            class="mr_16"
            :radio_values="['省份', '城市']"
          />
        </div>
        <div class="fansChartBox">
          <ChinaMap
            :mapData="provinceRate"
            v-if="finishFlag && showMap && provinceRate != null"
          />
          <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishFlag && showMap && provinceRate == null"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div>
          <div v-if="!showMap && finishFlag && cityRate != null">
            <table class="theadDiv">
              <thead>
                <tr>
                  <th>城市</th>
                  <th>占比</th>
                </tr>
              </thead>
            </table>
            <div class="tbodyDiv">
              <table>
                <tbody>
                  <tr v-for="(item, index) in cityRate" :key="'m' + index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.value }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            v-if="!showMap && finishFlag && cityRate == null"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <div class="itemDiv">
        <div class="titleBox">
          <img src="@/assets/wang/tdetails/mainStar.png" alt="" />
          <span>观众星座分布</span>
        </div>
        <div class="fansChartBox">
          <DetailsBar
            :starXData="starXData"
            :starYData="starYData"
            v-if="finishFlag && starXData.length != 0"
          />
          <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishFlag && starXData.length == 0"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div> -->
      <div class="itemDiv">
        <div class="titleBox">
          <img src="@/assets/meng/hot_analyse02.png" alt="" />
          <span>观众来源分析</span>
        </div>
        <div class="fansChartBox">
          <BigPie
            :valueData="genderFrom"
            v-if="finishFlag && genderFrom.length != 0"
          />
          <div
            v-loading="!finishFlag"
            v-if="!finishFlag"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishFlag && genderFrom.length == 0"
            class="noDataNoticewl"
          >
            目前没有可以查看的数据哟~
          </div>
        </div>
      </div>
      <div class="itemDiv">
        <div class="titleBox">
          <img src="@/assets/wang/live/gift.png" alt="" />
          <span>土豪送礼TOP10</span>
        </div>
        <section v-if="giftList.length != 0">
          <table class="table table01">
            <thead>
              <tr>
                <th>排名</th>
                <th>土豪</th>
                <th>打赏音浪</th>
              </tr>
            </thead>
          </table>
          <div class="tableListBox">
            <table class="table">
              <tbody>
                <tr v-for="(item, index) in giftList" :key="'a' + index">
                  <td>{{ item.rank }}</td>
                  <td>
                    <div class="richerBox">
                      <img :src="item.logo" />
                      <span>{{ item.nickName }}</span>
                    </div>
                  </td>
                  <td>{{ item.sound }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="!finishFlag"
              v-if="!finishFlag"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div v-if="finishFlag && genderData == null" class="noDataNoticewl">
              目前没有可以查看的数据哟~
            </div>
          </div>
        </section>
        <div v-if="giftList.length == 0" class="noDataNoticewl">
          目前没有可以查看的数据哟~
        </div>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/audience.jpg'" alt="" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="liveData" :lowestVipNum="vipRootObj[6][36].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ChinaMap01 from "@/pages/wang/talent/tdetails/component/ChinaMap01.vue";
import ChinaMap from "@/pages/wang/talent/tdetails/component/ChinaMap.vue";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import Category from "@/pages/wang/talent/tdetails/component/Category";
import DetailsBar from "@/pages/wang/talent/tdetails/component/DetailsBar";

export default {
  components: { ChinaMap01, BigPie, Category, DetailsBar },
  data() {
    return {
      fansMap: "省份",
      genderColor: ["#fd7f2c", "#1779ff"],
      ageColor: ["#06f0ab", "#fd7f2c", "#b710fc", "#fcbc10", "#1779ff"],
      // showPie:true
      // 粉丝性别
      genderData: [],
      finishFlag: false,
      // 粉丝年龄
      ageData: [],
      // 地域分布
      provinceRate: [],
      cityRate: [],
      showMap: true,
      // 星座
      starRate: [],
      starXData: [],
      starYData: [],
      // 观众来源分析
      genderFrom: [],
      giftList: [],

      cancel: null,
      cancel01: null,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {},
  watch: {
    // 地域分布
    fansMap: function (newVal, oldVal) {
      if (newVal == "省份") {
        this.showMap = true;
      } else if (newVal == "城市") {
        this.showMap = false;
      }
    },
  },
  created() {
    if (this.vipRootObj[6][36].owner) {
      this.Getaudience();
      this.getGift();
    }

    // this.getChartData();
  },
  mounted() {},

  methods: {
    // 粉丝性别分布  // 粉丝年龄分布  // 地域分布  // 粉丝星座
    Getaudience() {
      let that = this;
      that.$axios
        .get(
          "/api/live/analysis",
          {
            params: {
              roomId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.genderData = res.data.data.fansSexList;
            that.ageData = res.data.data.fansAgeList;

            that.provinceRate = res.data.data.fansArea.provinceList;
            that.cityRate = res.data.data.fansArea.cityList;
            that.genderFrom = res.data.data.fansFrom;
            that.starXData = res.data.data.fansStart[0];
            that.starYData = res.data.data.fansStart[1];
            // 处理年龄
            // res.data.data.ageRate.map((element) => {
            //   that.ageData.push({ name: element.name+'岁', value: element.value });
            // });
            // 处理星座
            // that.starRate = res.data.data.fansStart[0];
            // if (that.starRate != null) {
            //   that.starRate.forEach((element) => {
            //     that.starXData.push(element.name);
            //     that.starYData.push(element.value);
            //   });
            // }

            that.finishFlag = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getGift() {
      let that = this;
      that.$axios
        .get(
          "/api/live/reward",
          {
            params: {
              roomId: that.$route.params.id,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.giftList = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#audience {
  width: 100%;
  min-height: 100vh;
  .mainDiv {
    margin-top: 55px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    .itemDiv {
      overflow: hidden;
      width: 50%;
      .titleBox {
        img {
          margin-left: 0;
        }
      }
    }
    // 城市 table
    .mapDiv {
      .theadDiv {
        margin-top: 27px;
      }
      .tbodyDiv {
        width: 100%;
        max-height: 324px;
        overflow: auto;
      }
      table {
        width: 100%;
        thead {
          width: 100%;
          background-color: #f5f9ff;
          border-radius: 4px;
          tr {
            height: 48px;
            th {
              color: #555555;
              font-size: 14px;
            }
          }
        }
        tbody {
          width: 100%;
          tr {
            height: 52px;
            border-bottom: 1px solid #e5e5e5;
            td {
              font-size: 14px;
              color: #222222;
              width: 50%;
              text-align: center;
            }
          }
        }
      }
    }
    .fansChartBox {
      height: 439px;
    }
    .table01 {
      margin-top: 20px;
    }
    .tableListBox {
      height: 388px;
      overflow-y: auto;
    }
    table {
      overflow-y: auto;
      thead {
        tr {
          th:nth-of-type(1) {
            width: 27%;
          }
          th:nth-of-type(2) {
            width: 37%;
          }
          th:nth-of-type(3) {
            width: 36%;
          }
        }
      }
      tbody {
        tr {
          height: 80px;
          td {
            text-align: center;
          }
          td:nth-of-type(1) {
            width: 27%;
          }
          td:nth-of-type(2) {
            width: 37%;
          }
          td:nth-of-type(3) {
            width: 36%;
          }
        }
        .richerBox {
          width: 100%;
          text-align: left;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 10%;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
          }
          span {
            flex: 1;
            text-align: left;
            font-size: 16px;
            color: #222222;
            font-weight: 600;
            padding-left: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  .aysBox2 {
    width: 100%;
    margin-top: 25px;
    .lineChart {
      width: 100%;
      height: 449px;
    }
  }
  .chartTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }
}
</style>